<template>
  <!-- li-bdiv:为边框组件 -->
  <div class="border">
    <p class="title">
      <span>{{title}}</span>
    </p>
    <slot></slot>
  </div>
</template>

<script>
export default {
  /* 
    参数说明：
        title：标题，默认值为''
  */
  props: {
    title: { type: String, default: '' },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped>
.border {
  position: relative;
  border: 1px solid transparent;
}
.border::before {
  content: "";
  width: 100%;
  height: calc(100% - 10px);
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  position: absolute;
  left: 0px;
  top: 10px;
  /* 解决父元素的伪元素层级过高，盖住子元素的问题 */
  pointer-events:none;
}
.title {
  position: relative;
  height: 20px;
}
.title span {
  padding: 0px 10px;
  background: #fff;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 20px;
}
</style>